<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="iconfont.css">
	<style type="text/css">
	body,h3,div{
		margin: 0;
		padding: 0;
	}


	.kuang{
		width: 300px;
		height: 500px;
		border: 1px solid gray;
		margin: 0 auto;
		border-radius: 20px;
	}
	.qing{
		width: 300px;
		height: 35px;
		background-color: orange;
		border-top-left-radius:20px; 
		border-top-right-radius:20px; 
		text-align: center;
		padding-top: 15px;
	}
	.qing span{
		font-size: 16px;
		color: #fff;
		display: block;

		}
		.gongyong{
			padding: 20px;
			/*border: 1px solid ;*/
			
		}
		.gongyong button{
			min-height: 30px;
			background-color:orange;
			color: white;
			margin: 5px 10px;
			border-radius: 5px;


		}
.iconfont1{
	position: absolute;
	top: 32px;
	margin-left: 15px;
}
	</style>
</head>
<body>
<div class="kuang">

		<div class="qing">
				<h3 style="line-height:45px;color:white;">请选择省份</h3>
				<span class="iconfont icon-fanhui iconfont1" ></span>
			
		</div>
		<!-- 这是省份 -->
		<div class="shengfen gongyong">

			</div>
			<!-- 这是城市 -->
		<div class="city gongyong" style="position:absolute;left:1100px;top: 100px;">

			</div>
			<!-- 这是区 -->
		<div class="area gongyong" style="position:absolute;left:1300px;top: 100px;">


		</div>

</div>
	
<script type="text/javascript" src="js/jquery3.js"> </script>
<script type="text/javascript">
function tianjiashuju(){
	$('.shengfen').empty();
	$.get('json/province.json',function(res){
		for (var i = 0; i < res.length; i++){
			var btn='';
			btn='<button onclick="showcity(this)" value="'+res[i].id+'">'+res[i].name+'</button>'
			$('.shengfen').append(btn);
		}
// 先把原来的清空  获取json里面的数据  然后加到省份div里面

	});
}
tianjiashuju();
	function showcity(btn){
		$('.city').empty();
		var pid=$(btn).val();
		$.get('json/city.json',function(res){
			for (var i = 0; i <res.length; i++) {
				if (pid==res[i].pid) {
					var btn='';
					btn='<button onclick="showarea(this)" value="'+res[i].id+'">'+res[i].name+'</button>'
					$('.city').append(btn);
				};
				
			};
		});
		$('.city').show();
		$('.area').hide();
	};
	
function showarea(btn){
		$('.area').empty();
		var pid=$(btn).val();
		$.get('json/area.json',function(res){
			for (var i = 0; i <res.length; i++) {
				if (pid==res[i].pid) {
					var btn='';
					btn='<button onclick="Complete()" value="'+res[i].id+'">'+res[i].name+'</button>'
					$('.area').append(btn);
				};
			}
				
			
		});
		$('.area').show();
	}
	$(".iconfont1").click (function(){
		
			if($('.area').is(':visible')){
				$('.area').hide();
			}else if($('.city').is(':visible')){
				$('.city').hide();
			};
		

	})

		
</script>
</body>
</html>

